<script setup>
import { onMounted, ref } from 'vue'
import { getUserInfoAPI } from '@/api/login'
import { useRoute } from 'vue-router'
import HomeManage from '@/views/home/components/home-manage.vue'
import StatManage from '@/views/home/components/stat-manage.vue'
import MyManage from '@/views/home/components/my-manage.vue'
import TeacherHomeManage from '@/views/home/components/teacher-home-manage.vue'
import TeacherStatManage from '@/views/home/components/teacher-stat-manage.vue'

const route = useRoute()
const homePage = ref()

const mIndex = ref(0)
// const map = ref({})

const type = ref(0)

const menu = ref([
	{
		title: '打卡',
		index: 0,
		active: require('./image/home-active.png'),
		default: require('./image/home-default.png'),
	},
	{
		title: '考勤统计',
		index: 2,
		active: require('./image/tongji-active.png'),
		default: require('./image/tongji-default.png'),
	},
	{
		title: '我的',
		index: 1,
		active: require('./image/my-active.png'),
		default: require('./image/my-default.png'),
	},
])

const teacherMenu = ref([
	{
		title: '首页',
		index: 3,
		active: require('./image/home-active.png'),
		default: require('./image/home-default.png'),
	},
	{
		title: '考勤统计',
		index: 4,
		active: require('./image/tongji-active.png'),
		default: require('./image/tongji-default.png'),
	},
	{
		title: '我的',
		index: 1,
		active: require('./image/my-active.png'),
		default: require('./image/my-default.png'),
	},
])
const infoData = async () => {
	const res = await getUserInfoAPI()
	if (res) {
		localStorage.setItem('role_type', res.data.type)
		type.value = +res.data.type
		if (route.query.id) {
			mIndex.value = Number(route.query.id)
		} else {
			console.log('type的值', type.value)
			mIndex.value = +type.value === 4 ? 0 : 3
		}
	}
}

const time = ref(null)
const latitude = ref('')
const longitude = ref('')
const location = () => {
	time.value = setInterval(() => {
		latitude.value = localStorage.getItem('latitude')
		longitude.value = localStorage.getItem('longitude')
		if (latitude.value && longitude.value) {
			clearInterval(time.value)
			time.value = null
		}
	}, 1000)
}
location()
const menuItem = (index) => {
	mIndex.value = index
}

onMounted(async () => {
	await infoData()
	homePage.value.style.height = window.innerHeight + 'px'
})
</script>

<template>
	<div class="page" ref="homePage">
		<div id="container" style="height: 200px; display: none"></div>
		<div class="content">
			<home-manage v-if="mIndex === 0"></home-manage>
			<stat-manage v-if="mIndex === 2"></stat-manage>
			<my-manage v-if="mIndex === 1"></my-manage>
			<teacher-home-manage v-if="mIndex === 3"></teacher-home-manage>
			<teacher-stat-manage v-if="mIndex === 4"></teacher-stat-manage>
		</div>
		<div class="footer">
			<div
				class="menu-item"
				v-for="item in type === 4 ? menu : teacherMenu"
				:key="item.index"
				:class="mIndex === item.index ? 'active' : ''"
				@click="menuItem(item.index)"
			>
				<img :src="mIndex === item.index ? item.active : item.default" alt="" />
				<p>{{ item.title }}</p>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
#container {
	width: 100%;
	height: 500px;
}

.page {
	width: 100%;
	height: 100%;
	position: relative;
	background: url('./image/home-bg.png') no-repeat center;
	background-size: cover;

	.content {
		width: 100%;
		height: calc(100% - 150px);
		overflow-y: scroll;
		box-sizing: border-box;
	}

	.footer {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		height: 100px;
		//height: calc(100px + constant(safe-area-inset-bottom));
		///* 兼容 IOS<11.2 */
		//height: calc(100px + env(safe-area-inset-bottom));
		///* 兼容 IOS>11.2 */
		//padding-bottom: constant(safe-area-inset-bottom);
		///* 兼容 IOS<11.2 */
		//padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 IOS>11.2 */
		background: #ffffff;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.1);
		width: 100%;

		.menu-item {
			justify-content: center;
			width: 50%;
			height: 100px;
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 20px;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-weight: 600;
			color: #dddddd;

			&.active {
				color: #1498ff;
			}

			img {
				width: 52px;
				height: 52px;
				margin-bottom: 6px;
			}
		}
	}
}
</style>
